<template>
    <div id="customers_remind">
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="0.5">
                    <div id="circle1"></div>
                </el-col>
                <el-col :span="10">
                    <div style="font-weight: bold">群行为提醒</div>
                    <br/>
                    <div>目前支持检测发送带二维码图片、链接、小程序、名片</div>
                </el-col>
                <el-col :span="0.5">
                    <div id="circle2" style="margin-top: 4px"></div>
                </el-col>
                <el-col :span="10">
                    <div style="font-weight: bold">关键词提醒</div>
                    <br/>
                    <div>手动添加关键词</div>
                </el-col>
                <el-col :span="24">
                    <div class="tip">
                        <span style="color: #409EFF"><i class="el-icon-warning-outline"
                                                        style="font-weight: bold"> 注意</i></span>
                        <p/>
                        &nbsp;&nbsp;&nbsp;&nbsp;1.利用群行为、关键词及时发现违规行为，关键词行为提醒也可用于设置商机关键词提醒群主及时处理。<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;2.该功能需要开通消息存档方可使用，可点击此处进入 <el-button type="text" @click="$router.push('/scrm_views/riskControl/session_archive/index')">消息存档</el-button><br/>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="box-card">
            <el-row :gutter="10">
                <el-container>
                    <el-col :span="5">
                        <el-aside>
                            <el-card class="box-card" style="height: 488px">
                                <div style="overflow: scroll">
                                    <el-menu default-active="0" class="el-menu-vertical-demo" open="1">
                                        <el-submenu index="1">
                                            <template slot="title">
                                                <i class="el-icon-s-unfold"></i>
                                                <span>方案列表</span>
                                            </template>
                                            <el-menu-item v-for="(item,i) in plan" :key="i" :index="i.toString()" @click="menuClick(item)">
                                                {{item.projectName}}
                                            </el-menu-item>
                                        </el-submenu>

                                        <!--<el-submenu index="2">
                                            <template slot="title">
                                                <i class="el-icon-s-unfold"></i>
                                                <span>重大敏感词提醒</span>
                                            </template>
                                        </el-submenu>-->
                                    </el-menu>
                                </div>
                            </el-card>
                            <el-card class="box-card">
                                <el-footer height="20px" style="text-align: center">
                                    <el-button type="text" @click="addPlan">+ 添加方案</el-button>
                                </el-footer>
                            </el-card>
                        </el-aside>
                    </el-col>
                    <el-col :span="19">
                        <el-card class="box-card" style="height: 550px">
                            <el-container>
                                <el-main>
                                    <el-form ref="form" :model="formData">
                                        <el-form-item>
                                            <span style="font-weight: bold;font-size: 20px;">选择适用的客户群：</span><br/>
                                            <el-button type="primary" @click="openGroupMultipleHandle">+ 添加客群
                                            </el-button>
                                        </el-form-item>
                                        <el-form-item style="margin-bottom: 0">
                                            <div style="overflow: scroll;height: 60px">
                                                <el-tag v-for="(tag,index) in groupList" :key="index" closable
                                                        @close="closeTagHandle1(tag)" style="margin-right: 10px">
                                                    {{ tag.clientGroupName }}
                                                </el-tag>
                                            </div>
                                        </el-form-item>
                                        <el-form-item>
                                            <span style="font-weight: bold;font-size: 20px;">设置提醒行为</span>
                                        </el-form-item>
                                        <el-form-item>
                                            <span style="font-size: 15px;">客户群行为提醒</span><br/>
                                            <el-checkbox-group v-model="groupRemind">
                                                <el-checkbox label="1">发送带二维码的图片</el-checkbox>
                                                <el-checkbox label="2">发送链接分享</el-checkbox>
                                                <el-checkbox label="3">发送小程序</el-checkbox>
                                                <el-checkbox label="4">发送名片</el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-row>
                                                <span style="font-size: 15px;">关键词行为提醒</span><br/>
                                                    <el-col :span="5" style="height: 60px">
                                                        <el-checkbox v-model="isKeywords">聊天消息中包含以下关键词</el-checkbox>
                                                    </el-col>
                                                    <div v-if="isKeywords">
                                                        <el-col :span="3">
                                                            <el-button @click="addKeywords">+ 添加关键词</el-button>
                                                        </el-col>
                                                        <el-col :span="15">
                                                            <div style="overflow: scroll;height: 60px">
                                                                <el-tag v-for="tag in keywordsRemind" :key="tag.name"
                                                                        closable @close="closeTagHandle2(tag)"
                                                                        style="margin-right: 10px;height: 35px;"> {{ tag.name }}
                                                                </el-tag>
                                                            </div>
                                                        </el-col>
                                                    </div>
                                            </el-row>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @click="onSubmit">保存</el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-main>
                            </el-container>
                        </el-card>
                    </el-col>
                </el-container>
            </el-row>
        </el-card>
        <el-dialog title="选择客群" :visible.sync="selectGroupVisible" width="60%" :close-on-click-modal="false"
                   :destroy-on-close="true">
            <List_multiple_select ref="selectGroup" :listFields="listFields" :dataSource="groupData" fieldId="clientGroupId" type="filter"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="selectGroupVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitGroup">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import List_multiple_select from "@/components/list_multiple_select/list_multiple_select";

    export default {
        name: "customers_remind_index",
        components: {List_multiple_select},
        data() {
            return {
                selectGroupVisible: false,
                formData: {},

                groupList:[],//客户群
                groupRemind: [],//客户群行为提醒
                isKeywords: false,//是否启用关键词行为提醒
                keywordsRemind: [],//关键词行为提醒

                plan: [],//方案列表
                groupData: [],//群列表
                listFields: {
                    clientGroupName: '名称'
                },
                currentPlan:{},
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init(){
                this.getPlan();
                this.getGroup();
            },
            reset(){
                this.formData = {}
                this.groupList = {}
                this.groupRemind = []
                this.isKeywords = false
                this.keywordsRemind = []
            },
            getGroup(){
                let that = this
                this.$request('/api/custGroup/selectGroup/1_0','', 'POST').then((data) => {
                    that.groupData = data.rows
                })
            },
            getPlan(){
                let that = this
                this.$request('/api/customersRemind/getName/1_0',{}, 'POST').then((data) => {
                    that.plan = data.rows
                }).then((value => {
                    if (that.plan.length !== 0){
                        that.menuClick(that.plan[0])
                    }
                }))
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            menuClick(item){
                let that = this
                that.reset()
                that.currentPlan = item
                this.$request('/api/customersRemind/getById/1_0', {customersRemindId: item.customersRemindId}, 'POST').then((data) => {
                    that.formData = data.data
                    that.groupList = data.data.clientGroupName
                    if (that.formData.customersRemindType != null){
                        that.groupRemind = that.formData.customersRemindType.split(',')
                    }
                    that.isKeywords = JSON.parse(data.data.keySwitch)
                    if (that.formData.customersRemindKeywords != null) {
                        let keyword = that.formData.customersRemindKeywords.split('|')
                        for (let key of keyword) {
                            that.keywordsRemind.push({
                                'name': key
                            })
                        }
                    }
                })
            },
            addPlan() {
                this.$prompt('请输入方案名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    let that = this
                    this.$request('/api/customersRemind/add/1_0', {projectName: value}, 'POST').then((data) => {
                        that.$message({
                            type: 'success',
                            message: '添加方案 "' + value + '" 成功！'
                        });
                        this.getPlan();
                    })
                }).catch(() => {

                });
            },
            addKeywords() {
                this.$prompt('请输入关键词', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    if(value == null || value == undefined || value == ''){
                        this.$message({
                            type: 'error',
                            message: '关键词不能为空！'
                        });
                        return;
                    }
                    var data = {'name': value}
                    this.keywordsRemind.push(data)
                    this.$message({
                        type: 'success',
                        message: '添加关键词 "' + value + '" 成功！'
                    });
                }).catch(() => {

                });
            },
            onSubmit() {
                let that = this
                if (that.currentPlan == null || that.currentPlan == {} || that.currentPlan.customersRemindId == undefined){
                    this.$message.error("请先选择方案！")
                    return;
                }
                let applyCustomersList = []
                for (let group of that.groupList){
                    applyCustomersList.push(group['clientGroupId'])
                }
                let customersRemindKeywords = ''
                for (let customersRemindKeyword of that.keywordsRemind){
                    customersRemindKeywords += customersRemindKeyword['name'] + '|'
                }
                customersRemindKeywords = customersRemindKeywords.substring(0,customersRemindKeywords.length-1);
                let param = {
                    customersRemindId: that.currentPlan.customersRemindId,
                    projectName: that.currentPlan.projectName,
                    applyCustomers: applyCustomersList.toString(),
                    customersRemindType: that.groupRemind.toString(),
                    keySwitch: that.isKeywords.toString(),
                    customersRemindKeywords: customersRemindKeywords,
                }
                this.$request('/api/customersRemind/update/1_0', param, 'POST').then((data) => {
                    that.$message({
                        message: '恭喜你，保存成功！',
                        type: 'success'
                    });
                })

            },
            submitGroup() {
                let data = this.$refs.selectGroup.getData();
                this.groupList = data
                this.selectGroupVisible = false
            },
            closeTagHandle1(tag) {
                this.groupList.splice(this.groupList.indexOf(tag), 1);
            },
            closeTagHandle2(tag) {
                this.keywordsRemind.splice(this.keywordsRemind.indexOf(tag), 1);
            },
            openGroupMultipleHandle() {
                this.selectGroupVisible = true
                this.$nextTick(() => {
                    this.$refs.selectGroup.toggleRowSelection(this.groupList)
                })
            }
        }
    }
</script>

<style scoped>
    #customers_remind .box-card {
        width: 100vm;
    }

    #circle1 {
        margin-top: 4px;
        background: #ff6f00;

        width: 15px;

        height: 15px;

        border-radius: 50%;

    }

    #circle2 {
        margin-top: 4px;
        background: #ffa200;

        width: 15px;

        height: 15px;

        border-radius: 50%;

    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 20px;
        min-height: 400px;
    }
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 5px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(79, 163, 253,0.8);
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    }
</style>
